<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>数据代理</title>
    <h1>阿斯达</h1>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1> {{r.name}} 高： {{r.tall}} </h1>
    </div>
    <script type="text/javascript">
        var number = 19
        let person = {
            name: '张三',
            sex: "男士",
            age: 18,
            num: number,
        }
        // Object.defineProperties(person, 'tall' ,{
        //     value: 85
        // })
        Object.defineProperty(person, "num", {

            // 当有人读取nnum时候 函数会被调用  返回值就是num
            get: function () {
                return number
            },
            set(value){
                console.log("set 方法")
                // console.log(num)
                console.log(value)
                number = value
            }
        })
        Object.defineProperty(person, "tall", {
            value: 20,
            encodeURIComponent: true,//是否可以枚举
            writable: true,///控制属性是否可以哦被修改
            configurable: true,///是否可以被删除
        })
        console.log(person)
        console.log(Object.keys(person))
        new Vue({
            el: '#root',
            data() {
                return {
                    r: person,
                    name: "ra"
                }
            }
        })
    </script>
</body>

</html>